<template>
	<view class="Search">
		<view class="seach_head">
			<view class="searchbar">
				<view class="searchBox">
					<input type="text" class="input" v-model="info" :focus="isFocus"/>
				</view>
			</view>
			<view class="searchBtn">
				<view class="btn" @tap="searchClick">
					搜索
				</view>
			</view>
		</view>
		<scroll-view class="content" scroll-y="true">
			<view class="topicItem" v-for="(item,index) in topicResult" :key="index" @tap="topicClick(index)" v-if="flag">
				<view class="picture">
					<image :src="item.topicIcon" class="image"></image>
				</view>
				<view class="title">
					<view class="title_item">
						{{item.topicName}}
					</view>
					<view class="title_item">
						热度11.3w
					</view>
				</view>
				<view class="introduce">
					话题介绍:{{item.topicDescr}}
				</view>
				<view class="attention" @tap="topicClick(index)">
					<view class="attentionBtn">
						关注
					</view>
				</view>
			</view>
			<InformationBar  opIndex="0" v-for="(item,index) in tieResult" :key="index" :arr="item"  v-if="flag==0" @tap="tieClick(index)"></InformationBar>
		</scroll-view>
	</view>
</template>

<script>
	import InformationBar from "@/components/common/InformationBar.vue"
	export default {
		name: "Search",
		components: {
			InformationBar
		},
		data() {
			return {
				isFocus:true,
				info: "",
				topicResult: [],
				tieResult: [],
				flag: 0
			}
		},
		onLoad(option) {
			this.flag = option.flag
		},
		methods:{
			searchClick() {
				if(this.flag == 0) {
					this.inviteSearch()
				} else {
					this.topicSearch()
				}
			},
			async topicSearch() {
				const res = await this.$myRequest({
					url: "/topic/selectTopicNebulous",
					data: {
						message: this.info,
						page: 1,
						pageSize: 10
					}
				})
				console.log(res)
				this.topicResult = res.data.data.list
			},
			async inviteSearch() {
				const res = await this.$myRequest({
					url: "/invitation/selectInviteNebulous",
					data: {
						message: this.info,
						page: 1,
						pageSize: 10
					}
				})
				
				this.tieResult = res.data.data.pageInfo.list
				console.log(this.tieResult )
			},
			topicClick(index) {
				uni.setStorage({
					key: 'topic',
					data: {
						topic: this.topicResult[index]
					}
				})
				uni.navigateTo({
					url:'../topic/TopicDetail?topicId=' + this.topicResult[index].topicId
				})
			},
			tieClick(index) {
				uni.navigateTo({
					url: './HomeItem/Detail?inviId=' + this.tieResult[index].inviId
				})
			}
		}
	}
</script>

<style>
	.seach_head {
		display: flex;
		width: 93%;
		margin: 18.18rpx auto;
		background-color: #CFE4FF;
		border-radius: 18.18rpx;
	}
	.searchbar {
		flex: 4;
	}
	.searchBtn {
		flex: 1;
	}
	.input {
		border-radius: 18.18rpx;
		height: 90rpx;
		margin: 35rpx 34rpx;
		padding: 0 10px;
		background: url(../../static/search/magnifier.png) no-repeat 95% center / 30px #FFFFFF;
	}
	.btn {
		width: 80%;
		height: 65rpx;
		line-height: 65rpx;
		color: #FFFFFF;
		background-color: #62A7FF;
		border-radius: 9.09rpx;
		text-align: center;
		margin: 50rpx 0;
	}
	
	.content {
		background-color: #CFE4FF;
		width: 93%;
		margin: 18.18rpx auto;
		border-radius: 18.18rpx;
		height: 80vh;
	}
	
	.topicItem {
		display: flex;
		width: 95%;
		height: 10vh;
		margin: 0 auto;
	}
	
	.picture {
		width: 18vw;
		margin: auto;
	}
	
	.image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 14.54rpx;
	}
	
	.title {
		font-size: 25.45rpx;
		width: 20vw;
		margin: auto;
	}
	
	.title_item {
		padding: 15rpx 0;
	}
	
	.introduce {
		width: 36vw;
		font-size: 25.45rpx;
		margin: auto;
	}
	
	.attention {
		width: 10vw;
		margin: auto;
	}
	
	.attentionBtn {
		width: 100%;
		height: 4vh;
		line-height: 4vh;
		background-color: #62A7FF;
		text-align: center;
		font-size: 25.45rpx;
		color: #FFFFFF;
		border-radius: 9.09rpx;
	}
</style>
